@import "~assets/styles/_bootstrap";

.cropper {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	border-radius: 50%;


	> input[type="file"] {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}


	> img {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
  }

	.cropper-dialog {
	  position: fixed;
	  top: 0;
	  right: 0;
	  left: 0;
	  z-index: 4200;
	  margin: auto;
	  width: 100%;
	  height: 100%;
	  background-image: linear-gradient(to bottom,rgba(0,0,0,.75) 50%, rgba(0,0,0,1) 100%);
	  background-color: transparent;



	  .cropper-body {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    display: block;
	    margin: auto;
	    width: 80%;
	    transform: translate(-50%, -50%);
	  }

	  .cropper-toolsbar {
	    position: absolute;
	    bottom: rem(15px);
	    display: block;
	    margin: auto;
	    padding: 0 rem(15px);
	    width: 100%;
	    text-align: center;
	    font-size: rem(14px);

	    .cancel {
	      display: inline-block;
	      float: left;
	      color: #fff;
	      cursor: pointer;
	    }

	    .upload {
	      display: inline-block;
	      float: right;
	      color: #129fdd;
	      cursor: pointer;
	    }
	  }
	}

}